<template>
    <div class="step">
        <div class="detail-step" v-for="(item,index) in dataList" :key="index">
            <div class="step_top">
                <div class="step_top_left">
                    <div class="gy"><img :src="item.projectStatusName=='项目配置'?xmpzimg:(item.icon=='项目完成'?xmwcimg:yjfhimg)" alt=""></div>
                    <span>{{item.projectStatusName}}</span>
                </div>
                <div class="step_top_right">{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
            </div>
            <div class="step_bottom">{{item.content}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'WorkspaceJsonIndex',
    props:{
        dataList:{
            type:Array
        }
    },
    data() {
        return {
            xmpzimg: require('@/assets/iconfont/icon-xmpz.png'),
            xmwcimg: require('@/assets/iconfont/icon-xmwc.png'),
            yjfhimg: require('@/assets/iconfont/icon-yjfh.png'),
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>
.detail-step {
    position: relative;
    padding: 20px;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detail-step::after {
    content: '';
    display: block;
    position: absolute;
    left: 62px;
    bottom: 0;
    height: 0;
    width: calc(100% - 126px);
    border-bottom: 2px solid #E6E6E7;
}

.detail-step::before {
    display: block;
    content: "";
    position: absolute;
}

.detail-step:nth-last-child(1)::after {
    border-bottom-color: transparent;
}
.detail-step:nth-of-type(2)::before {
    top: -50%;
    left: 30px;
    height: 70%;
    width: 0;
    border-left: 2px solid #E6E6E7;
}

.detail-step:nth-of-type(3)::before {
    top: -50%;
    left: 30px;
    height: 70%;
    width: 0;
    border-left: 2px solid #E6E6E7;
}

.detail-step:nth-of-type(4)::before {
    top: -50%;
    left: 30px;
    height: 70%;
    width: 0;
    border-left: 2px solid #E6E6E7;
}

.step {
    font-family: PingFang SC;

}

.step_top {
    display: flex;
    align-items: center;

    .step_top_left {
        display: flex;
        align-items: center;
        margin-right: 54px;
        span {
            font-size: 15px;
            font-weight: 400;
            color: #000;
        }

        img {
            width: 20px;
            height: 20px;
            margin-right: 11px;
        }
    }

    .step_top_right {
        font-size: 15px;
        font-weight: 400;
        color: #989898;
    }

}
.step_bottom {
    font-size: 15px;
    font-weight: 400;
    color: #989898;
    margin-left: 31px;
    margin-top: 4px;
    min-height: 20px;
}
</style>